import * as echarts from 'echarts'
import { useEffect, useRef, useState } from 'react'
export default function BarChart({ xAxisData = [], data = [], isTurn = false }) {
    const graphRef = useRef(null)
    const [myChart, setMyChart] = useState()
    const colors = ['#165DFF', '#2CB8C5']
    let timer = useRef(null)
    const resizeObserver = new ResizeObserver(entries => {
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            myChart && myChart.resize();
        }, 100)
    });
    useEffect(() => {
        setMyChart(echarts.init(graphRef.current))
    }, [])
    const renderChart = () => {
        myChart && myChart.clear()
        const option = {
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                top: '40',
                left: isTurn ? '0' : '15',
                right: isTurn ? '90' : '0',
                bottom: '0',
                containLabel: true
            },
            legend: {
                right: '0',
                itemWidth: 8,
                itemHeight: 8,
                orient: 'horizontal',
                data: data.data.map(item => item.name)
            },
            xAxis: isTurn ? [
                {
                    type: 'value',
                    name: data.yName,
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: 'rgba(28,31,35,0.6)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#1c1f23'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e6e8ea',
                            type: 'dashed'
                        }
                    }
                }
            ] : [
                    {
                        type: 'category',
                        data: xAxisData,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(28,31,35,0.8)'
                            }
                        },
                        axisLabel: {
                            rotate: 45 // 旋转角度，例如 45 度
                        }
                    }
                ],
            yAxis: !isTurn ? [
                {
                    type: 'value',
                    name: data.yName,
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: 'rgba(28,31,35,0.6)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#1c1f23'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#e6e8ea',
                            type: 'dashed'
                        }
                    }
                }
            ] : [
                    {
                        type: 'category',
                        data: xAxisData,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(28,31,35,0.8)'
                            }
                        },

                    }
                ],
            series: data.data.map((item, index) => ({
                name: item.name,
                type: 'bar',
                color: colors[index],
                tooltip: {
                    valueFormatter: function (value) {
                        return value;
                    }
                },
                data: item.data
            }))
        };
        option && myChart.setOption(option);
    }
    useEffect(() => {
        // 保证dom可用 才进行图表的渲染
        myChart && renderChart()
        resizeObserver.observe(graphRef.current);
        return () => resizeObserver.disconnect();
    }, [myChart, xAxisData, data])
    return (
        <div ref={graphRef} style={{ width: '100%', height: '100%' }}></div>
    )
}
